<template>

<!-- vue的模板里面  所有的内容都要被一个根节点包含起来 -->
  <div id="app">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <!-- 绑定数据 -->
    <p>绑定数据</p>
    <p>这个是绑定数据___{{mmsg}}</p>
    <!-- 绑定对象 -->
    <p>绑定对象</p>
    <p>这个是绑定对象{{obj.name}}</p>

    <hr>
    <br>
    <!-- 循环数据和渲染数据 -->
    <ul v-for="item in list">
      <li>{{item}}</li>
    </ul>

    <hr>
    <br>
    <!-- 稍微复杂点的数组 -->
    <p>稍微复杂点的数组</p>
   <ul>
     <li v-for="(item,key) in list1">
      {{key}}---------- {{item.title}}
     </li>
   </ul>

<hr>

    <!-- 再复杂点的数据__数组里面是对象,对象里面又有数组 -->
   <p>再复杂点的数据__数组里面是对象,对象里面又有数组</p>

<ul>
    <li v-for="item in list2">
        {{item.cate}}

        <ol>
            <li v-for="sonitem in item.catelist">
                {{sonitem.title}}
            </li>
        </ol>

    </li>
</ul>


<!-- 绑定属性 -->
<p>绑定属性</p>
<!-- 01 简单 -->
<div v-bind:title="title">
        鼠标描上去就行
</div>

<!-- 02,动态绑定图片 -->
<!-- <img src="./assets/logo.png" alt=""> -->

<img v-bind:src="url">

<!-- 绑定属性的简写 -->
<img :src="url" >

<br>
<hr>

<!-- 绑定HTML___使用v-html来实现 -->
{{h}}

<div v-html="h"></div>


<!-- 绑定数据的另一种方法 -->
<div v-text="msg">

</div>


<!--1 绑定样式 -->
<div v-bind:class="{'red':flag}">
    我是div准备给我什么样式!
</div>

<!-- 绑定样式缩写___:class -->
<div :class="{'red':flag, 'green':!flag}">
    我是第二个div准备给我什么样式!
</div>

<!-- 给循环的item显示不同的颜色 -->
<ul>
    <li v-for="(item,key) in list" :class="{'red':key===0, 'green':key===2}">
        {{key}}----{{item}}
    </li>
</ul>



<!--2 绑定内联样式 -->
<div class="box" v-bind:style="{  width: widthdu + 'px' }">
  绑定内联样式
</div>

<!-- 绑定内联样式缩写 -->
<div class="box" :style="{  width: widthdu + 'px' }">
  绑定内联样式
</div>


</div>
</template>



<script>
export default {
  name: 'app',
  data () {     /**业务逻辑里面定义的数据 */
    return {
      msg: '你好新的开始了',
      mmsg: '我是被绑定的哦',

      obj:{
        name:"张三"
      },

      list:[111,222,333,444],

      list1:[
        {title: '1111'},
        {title: '2222'},
        {title: '3333'},
        {title: '4444'},
      ],

      list2:[
        {
          "cate":"国内新闻",
          catelist: [
            {title: '国内新闻1111'},
            {title: '国内新闻2222'},
          ]
        },
        {
          "cate":"国际新闻",
          catelist: [
            {title: '国际新闻3333'},
            {title: '国际新闻44444'},
          ]
        }
      ],


      // 绑定属性的数据
      title:"我是一个title哈哈",
      // url:'https://www.itying.com/themes/itying/images/logo.gif',

      h:"<h2>我是h2标签</h2>",
      flag:false,

      widthdu:200,
    }
  }
}
</script>



<style lang="scss">

    .red{
      color: red;
    }

    .green{
      color: blue;
    }

    .box{
        background-color: red;
        
        
    }
</style>
